<template>
	<view class="container-searchVerify">
		<view v-show="maskShow" class="mask" @click="closePop"></view>
		<view v-show="maskShow" class="searchVerify">
			<p class='searchVerify-text'>{{$t('请认证后再投资')}}</p>
			<p class="searchVerify-btn"  @click="closePop">{{$t('确定')}}</p>
		</view>
		<view class="lang-top">
			<view class="backIcon" @click="back()">
				<uni-icons type="left" size="26"></uni-icons>
			</view>
		</view>
		<view class="verify-start-view">
			<p class="verify-start-text"> {{$t('开始验证')}} </p>
			<p class="verify-start-num"> {{$t('为保障账户安全，请完成验证')}}：<span>{{user.username}}</span>  </p>
		</view>
		<view class="ver-code">
			<input  v-model="verifyCode" type="text" :placeholder="$t('请输入验证码')" class="inp1"/>
			<button  v-if="count <= 0" class="verify-btn" @click="verifyBtn">{{$t('获取验证码')}}</button>
			<button  v-else class="verify-btn2">{{count}}s</button>
		</view>
		<view class="login-btn" @click="revise">
			{{$t('完成验证')}}
		</view>
		<view class="intro-box">
			<view class="verification">
				{{$t('验证说明')}}
			</view>
			<p class="pstyle">1.{{$t('yan1')}}.</p>
			<p class="pstyle">2.{{$t('yan2')}}.</p>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				maskShow:false,
				verifyCode:'',
				count:0,
				code:'',
				user:{},
				times:null
			}
		},
		onShow() {
			this.getinfo()
		},
		methods:{
			getinfo(){
				this.$http.get(
					'api/user/index',//接口名
					{},//参数合集
					{},
					false
				).then(res=>{
					this.user = res.data
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			closePop(){
				this.maskShow=false;
			},
			back(){
				uni.navigateTo({
					url:'/pages/my/accountSetting'
				})
			},
			revise(){
				this.$http.post(
					'api/user/user_auth',//接口名
					{code:this.code},//参数合集
					{},
					false
				).then(res=>{
					uni.showToast({
						icon: 'success',
						title: res.data.msg
					});
					setTimeout(function(){
						uni.switchTab({
							url:'/pages/my/index'
						})
					},1500)
				},(err)=>{//失败的操作
					uni.showToast({
						icon: 'error',
						title: err.data.message
					});
				})
			},
			// 获取验证码
			verifyBtn(){
				let that = this;
				// that.count = 60;
				// that.times =  setInterval(function(){
				// 	that.countdown()
				// }, 1000);
					// let that = this
					that.$http.post(
						'/api/user/send',//接口名
						{}//参数合集
					).then(res=>{
						that.code = res.data.code
						uni.showToast({
							title: res.msg,
							icon:'success'
						});
						that.count = 60
						that.times =  setInterval(function(){
							that.countdown()
						}, 1000);
					},(err)=>{//失败的操作
						uni.showToast({
							icon: 'error',
							title: err.data.message
						});
					})
			},
			countdown() {
				if (this.count > 0) {
					console.log(this.count)
					this.count--;
				}else{
					//清除定时器
					clearInterval(this.times)
					//将验证码填充回验证码输入框
					this.verifyCode = this.code
				}
			},
		},
		
	}
</script>

<style scoped>
	.pstyle{
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	.verification{
		text-align: center;
		color: #e9b368;
		font-size: 52rpx;
		margin-bottom: 20rpx;
	}
	.intro-box{
	    margin-top: 80rpx;
	    padding: 0 60rpx;
	    margin-bottom: 40rpx;
	}
	.verify-start-num{
		font-size: 24rpx;
	}
	.verify-start-text{
		font-size: 52rpx;
		margin-bottom:40rpx;
	}
	.verify-start-view{
		width: 100%;
		margin-top: 64rpx;
		padding: 0 40rpx;
	}
	.container-searchVerify{
		background-color: #f6f6f6;
	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2014;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
	}
	.searchVerify{
		background-color: #fff;
		border-radius: 32rpx;
		width:90%;
		margin:0 5%;
		position: fixed;
		top: 45%;
		/* left: 50%; */
		z-index:2015;
		font-size: 32rpx;	
	}
	.searchVerify-text{
		padding: 26px 24px;
		font-size: 14px;
		line-height: 20px;
		white-space: pre-wrap;
		text-align: center;
	}
	.searchVerify-btn{
		height:96rpx;
		line-height:96rpx;
		text-align: center;
		color:red;
	}
	.lang-top{
		background-color: #fff;
		height:88rpx;
		line-height:88rpx;
	}
	.ver-code{
		display: flex;
		margin:80rpx 20rpx;
	}
	.inp1{
		flex: 1 1 auto;
		border-radius: 5px;
		border: 1px solid #eee;
		font-size: 28rpx;
		height: 92rpx;
		padding: 0 20rpx;
		background: #fff;
		
	}
	.verify-btn{
			flex: 0 0 40%;
		    margin-left: 20rpx;
		    font-size: 32rpx;
		    text-align: center;
		    line-height: 90rpx;
		    color: #fff;
		    height: 90rpx;
		    background: linear-gradient(90deg, #e4392e, #ff4d16);
		    border-radius: 8px;
	}
	.verify-btn2{
			flex: 0 0 40%;
		    margin-left: 20rpx;
		    font-size: 32rpx;
		    text-align: center;
		    line-height: 90rpx;
		    color: #fff;
		    height: 90rpx;
		    background: linear-gradient(90deg, #ccc, #ccc);
		    border-radius: 8px;
	}
	.login-btn{
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		width: 90%;
		background: linear-gradient(90deg, #e4392e, #ff4d16);
		border-radius: 46rpx;
		color: #fff;
		text-align: center;
		margin: 78rpx auto 0 auto;
	}
</style>